<template>
  <div style="margin-top:20px;background-color:#111A43">
    <div class="block" style="font-size:14px;background-color:#111A43">
      <!-- <span class="demonstration">按条件查询：</span> -->
      <el-input
        background-color="#111A43"
        clearable
        style="width:200px; margin-right:20px"
        placeholder="请输入设备编号"
        v-model="inputs"
        class="input-with-select"
      ></el-input>
      <el-date-picker
        style="margin-right:20px;background-color:#111A43"
        v-model="devTime"
        type="date"
        :picker-options="pickerOptions"
        placeholder="选择日期"
      ></el-date-picker>

      <el-button style="margin: 0 20px" size="small" type="primary" @click="searchData">查询</el-button>
    </div>
    <el-table
        tooltip-effect="dark"
          style="width: 100%;background-color: #111A43;color:'#fff'"
        :header-cell-style="{'text-align':'center',background: '#111A43',color:'#fff'}"
          :cell-style="{'text-align':'center',background: '#111A43',color:'#fff'}"
        background-color='#111A43'
      :default-sort="{prop: 'date', order: 'descending'}"
      :data="lamplist"
    >
    <!-- style="width: 100%" -->

      <el-table-column prop="deviceName" label="设备名称"></el-table-column>
      <el-table-column prop="exceptionData" label="操作"></el-table-column>
      <el-table-column prop="logTime" label="操作时间"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
    </el-table>
    <!-- 分页插件 -->
    <div class="footer" v-if="total > 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        background
        layout="total, prev, pager, next,jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
// import { getWarning } from "../../request/api";

export default {
  data() {
    return {
      devTime: "",
      // 0:在线状态异常,1:开关异常,2:功率异常
    //   value:'',
    //   options: [
    //     {
    //       value: "0",
    //       label: "在线状态异常"
    //     },
    //     {
    //       value: "1",
    //       label: "开关异常"
    //     },
    //     {
    //       value: "2",
    //       label: "功率异常"
    //     }
    //   ],
      inputs: "", //编号输入框
      devNums: 0,
      pickerOptions: {
        //控制时间范围
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      devTime: new Date(),
      lamplist: [],
      devicedata: {
        pageNum: 1, // 当前页
        pageSize: 10 // 每页显示条目
      },
      pageNum: 1, // 当前页
      pageSize: 10, // 每页显示条目
      total: "" // 数据总数
    };
  },
  mounted() {
    // this.getdevlist();
  },
  methods: {
    searchData() {
        if(this.inputs.length>0){
         this.devicedata.deviceName = this.inputs;
        }
        // if(this.value.length>0){
        //  this.devicedata.exceptionType = this.value;
        // }
        if(this.devTime){
          this.devicedata.logTime = this.$moment(this.devTime).format("YYYY-MM-DD");
        }
        this.getdevlist()
     
    },
    // 获取设备日志数据列表
    getdevlist() {
      if(this.devTime){
        this.devicedata.logTime = this.$moment(this.devTime).format("YYYY-MM-DD");
      }
      getWarning(this.devicedata)
        .then(d => {
          if (d.code == "0000") {
            // 设备数据
            this.lamplist = d.data.records;
            // 总页数
            this.total = Number(d.data.totalNum);
          }
          this.devicedata={
            pageNum: 1, // 当前页
            pageSize: 10 // 每页显示条目
          }
        })
        .catch(e => {
          console.log("设备报警数据列表接口调用失败");
        });
    },
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.devicedata.pageNum = this.pageNum;
      this.lamplist = [];
      if(this.inputs.length>0){
         this.devicedata.deviceName = this.inputs;
        }
        if(this.value.length>0){
         this.devicedata.exceptionType = this.value;
        }
        if(this.devTime){
          this.devicedata.logTime = this.$moment(this.devTime).format("YYYY-MM-DD");
        }
      this.getdevlist();
    }
  }
};
</script>


<style scoped >
/* 选择背景色 */
:deep(.el-input__inner) {

background: #111A43 !important;
color: #fff;
}
/* 日期选择框背景色 */
/* 改变 el-date-picker 的背景色 */
.el-date-picker .el-picker-panel {
  background-color: #111A43; 
}
.footer {
  position: fixed;
  bottom: 50px;
  left: 250px;
}
</style>
